<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Push</title>

<link charset="utf-8" rel="stylesheet" 	href="${pageContext.request.contextPath}/resource/bootstrap-3.3.6-dist/css/bootstrap.min.css"></link>
<link charset="utf-8" rel="stylesheet" href="${pageContext.request.contextPath}/resource/css/base-ui.css"></link>

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/framework.js"></script>

</head>

<body style="background-color: rgb(190, 209, 216);width: 600px;">


<script type="text/javascript">
var ACCOUNT;
var TIMEOUT = 500;
var ctx = {
	'act': 'reconnect',  //send
	'token': '',  //send/recv
	'sendType': '', //send
	'sendContent': '', //send
	'recvType': '', //recv
	'recvContent': '', //recv
	'totalAliveToken': 0, //recv 
	"totalToken": 0, //recv
};
var auto_refresh;
var isReconnect = false;
var isLogin = false;
//setTimeout, setInterval
//http://www.cnblogs.com/originate918/p/6209970.html
//$.parseJSON( jsonstr );JSON.stringify(obj), JSON.parse(string)
//http://www.cnblogs.com/wiseblog/articles/4209739.html
function refresh() {
    //$('#load_users').load('${pageContext.request.contextPath}/push');
    if (isReconnect) {
    	isReconnect = false;
		ctx.act = 'reconnect';
    	ctx.sendType = '';
    	ctx.sendContent = '';
    	ctx.recvType = '';
    	ctx.recvContent = '';
    	showProcess("加载中......");
    }
    if (isLogin) {
    	isLogin = false;
    	ctx.act = ctx.act;
    	ctx.sendType = 'login';
    	ctx.sendContent = ACCOUNT;
    	ctx.recvType = '';
    	ctx.recvContent = '';
    }
    
    $.ajax({
        url : '${pageContext.request.contextPath}/push',
        data: { 'ctx': JSON.stringify(ctx)},
        cache : false, 
        async : true,
        type : "POST",
        success : function(result) {
        	//console.log("succ");
        	if (ctx.token != '' && result.token != ctx.token) {
        		sessionClosed();
        	}
        	if (result != null) {
        		for (var key in result) {
	        		ctx[key] = result[key];
	        	}
        	}
        	$('#current_time').text("ajax success..." + new Date().toLocaleString());
        	$('#user_info').text(JSON.stringify(ctx));
        	if (ctx.act == 'reconnect') {
        		hideProcess();
        	}
        	ctx.act = 'refresh';
        	ctx.sendType = '';
        	ctx.sendContent = '';
        	ctx.recvType = '';
        	ctx.recvContent = '';
        	auto_refresh = setTimeout(refresh, TIMEOUT);
        	onReplyReceived(result);
        }, 
        error : function() {
        	//console.log("err");
        	//FIXME:
        	ctx.act = 'reconnect';
        	ctx.sendType = '';
        	ctx.sendContent = '';
        	ctx.recvType = '';
        	ctx.recvContent = '';        	
        	auto_refresh = setTimeout(refresh, TIMEOUT);
        	$('#current_time').text("ajax error..." + new Date().toLocaleString());
        	$('#user_info').text(JSON.stringify(ctx));
        	showProcess("加载中......");
        }
    });
}
function reconnect() {
	isReconnect = true;
}
$(function(){
	auto_refresh = setTimeout(refresh, TIMEOUT);
    showProcess("加载中......");
    $("#LoginDialog").show();	
});

function onMessageReceived(data) {     

}

function login() {
	isLogin = true;
}

function doLogin() {
    ACCOUNT = $('#account').val();
    if ($.trim(ACCOUNT)=='' ) {
       return;
    }
    showProcess('正在登陆请稍候......');
	login();
}

function onReplyReceived(result) {
	if (result.replyType == 'loginReply') {
        hideProcess();
        $("#LoginDialog").hide();
        $("#MessageDialog").fadeIn();
        $("#current_account").text("当前账号:"+ACCOUNT);
	}
}

function sessionClosed() {
    $("#MessageDialog").hide();
    $("#LoginDialog").fadeIn();
    $("#current_account").text("");	
}


</script>
<div style="display:block;">
	<div>Hello, world!</div>
	<div><button type="button" onclick="reconnect();">Reconnect</button></div>
	<div><span style="color:red;">current_time:&nbsp;&nbsp;</span><span id="current_time"></span></div>
	<div><span style="color:red;">user_info:&nbsp;&nbsp;</span><span id="user_info"></span></div>
</div>


<div class="modal-dialog" id="LoginDialog" style="width:300px; display:none;">
		<div class="modal-content">
			<div class="modal-body" style="padding:0px;">
            <div  style="height:150px;text-align: center; background: #5FA0D3; color: #ffffff; border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px;">
	        <img src="${pageContext.request.contextPath}/resource/img/icon.png" style="height: 60px;width: 60px;margin-top:30px;"/>
	        <div style="margin-top: 20px; color: #ffffff;font-size: 16px;">使用用户帐号登录</div>
 		    </div>
		   
	        	<div class="input-group" style="margin-top: 20px;margin-left:10px;margin-right:10px;margin-bottom:20px;">
	        	  <span class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
				  <input type="text" class="form-control" id="account" maxlength="32" placeholder="帐号"
					style="display: inline; width: 100%; height: 50px;" />
				</div>	 
			 
		    </div>
			<div class="modal-footer" style="text-align: center;">
				<a type="button" class="btn btn-success btn-lg" onclick="doLogin()"
					style="width: 250px;">登录</a>
			</div>
      </div>
</div>

<div class="panel panel-primary" id="MessageDialog"
	style="display: none; width: 500px; position: relative;min-height: 600px;box-shadow: 0 0 10px -2px #0B203A;top:50px;left:50px;">
	<div class="panel-heading" style="height: 80px;background: #428bca;line-height: 80px;padding: 0 10px;">
		消息列表
    <span id="current_account" style="color: white;float: right;font-weight: bold;"></span>
	</div>
    <div style="text-align: center;padding: 10px;">
		 请调用接口，或者在后台页面，推送一条消息到客户端
	</div>
	<div class="panel-body" id="messageList"> 
	</div>
</div>

</body>
</html>